@import '../../devui';

.calc {
  background-color: $devui-glass-morphism-bg;
  width: 550px;
  height: 500px;
  margin: 50px auto;
  border-radius: $devui-border-radius-card;
  box-shadow: $devui-shadow-length-base $devui-shadow;
  .title {
    font-size: $devui-font-size-modal-title;
    line-height: 55px;
    text-indent: 30px;
    color: $devui-text;
  }
  .result {
    background-color: $devui-primary-bg;
    width: 490px;
    margin: 0 auto;
    padding: 0 8px;
    border: 1px solid $devui-primary-line;
    border-radius: $devui-border-radius-card;
    font-size: 50px;
    text-align: right;
    overflow: hidden;
  }
  .operator {
    width: 500px;
    height: 300px;
    margin: 30px auto 0;
    ul li {
      background-color: $devui-form-control-bg;
      width: 80px;
      height: 60px;
      margin: 10px;
      border-radius: $devui-border-radius-card;
      box-shadow: $devui-shadow-length-base $devui-shadow;
      color: $devui-text;
      font-size: $devui-font-size-data-overview;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      float: left;
      cursor: pointer;
      &:hover {
        background-color: $devui-list-item-hover-bg;
      }
      &:active {
        background-color: $devui-list-item-active-bg;
      }
      &.tool {
        background-color: $devui-contrast;
        color: $devui-light-text;
        &:hover {
          background-color: $devui-contrast-hover;
        }
        &:active {
          background-color: $devui-contrast-active;
        }
      }
      &.tool2 {
        background-color: $devui-primary;
        color: $devui-light-text;
        &:hover {
          background-color: $devui-primary-hover;
        }
        &:active {
          background-color: $devui-primary-active;
        }
      }
    }
  }
}
